<template>
    <view class="content">
        <!-- 头部logo -->
        
        

        <br/>
        <mSearch :mode="2" button="inside" @search="search($event,2)"></mSearch>
		<!--        搜索的值：{{val2}} -->

		<!-- 多图轮播 -->
		<carousel :img-list="imgList" url-key="url" @selected="selectedBanner"/>

		<!-- 卡片 -->
		<!-- <view class="margin-bottom" v-for="(item, index) in cardList" :key="index">
			<image :src="item.url"></image>
			<text>{{item.id}}</text>
			<template>
				<div class="book-item" v-for="book in books" :key="book">
				  <van-image class="home-hot-book-img" :src="book.img">
				  </van-image>
				  <div class="content">
					<p class="book-author">作者:{{book.author}}</p>
					<p class="book-gist">简述:{{book.gist}}</p>
					<p class="book-author">热度值:{{book.hot}}</p>
				  </div>
				  <p style="height: 5px;color: #999999"></p>
				</div>
			</template>
		</view> -->
		<div class="book-item" v-for="(item, index) in cardList" :key="index">
			<img class="home-hot-book-img" :src="item.url" />
			  </image>
			  <div class="content-item">
				<p class="book-author">{{item.goods}}</p>
				<p class="book-gist">价格：100.00</p>
				<p class="book-gist">简述:{{item.messge}}</p>
				
			  </div>
			  <p style="height: 10px; color: #994309"></p>
			</div>
		</div>
		
	</view>
	
	
 </template>

<script>
	
	import carousel from '@/components/vear-carousel/vear-carousel'
	
	 import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
	 export default {
	    components: {
	        mSearch,
			 carousel
	    },
	    data() {
	        return {
	            val0: '',
	            val1: '',
	            val2: '',
	            val3: '',
	            placeholder:'动态占位内容',
				imgList: [{
				                    url: 'https://img9.51tietu.net/pic/2019-091200/vgkpidei2tjvgkpidei2tj.jpg',
				                    id: 1
				                },{
				                    url: 'https://img9.51tietu.net/pic/2019-091200/euzekmi5m23euzekmi5m23.jpg',
				                    id: 2
				                },{
				                    url: 'https://img9.51tietu.net/pic/2019-091200/143tt0ta4sr143tt0ta4sr.jpg',
				                    id: 3
				                },{
				                    url: 'https://img9.51tietu.net/pic/2019-091200/ff1vqwm3q33ff1vqwm3q33.jpg',
				                    id: 4
				                },],
				cardList: [
					{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 id:4,
					 goods:"素力高",
					 messge:"素力高（Solid Gold）金装天然无谷鸡肉配方全价猫粮5.44kg 金装猫粮添加鸡肉&蛋粉“宠毛克星”让宠爱更自由，iRobot扫地机器人与Go!、NOW、路斯、美里美亚四大宠物品牌强强联合，低至7折更有幸运大抽奖，购物好礼拿不停！立即抢购(此商品不参加上述活动) 查看"
					},	{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 id:4,
					 goods:"素力高",
					 messge:"素力高（Solid Gold）金装天然无谷鸡肉配方全价猫粮5.44kg 金装猫粮添加鸡肉&蛋粉“宠毛克星”让宠爱更自由，iRobot扫地机器人与Go!、NOW、路斯、美里美亚四大宠物品牌强强联合，低至7折更有幸运大抽奖，购物好礼拿不停！立即抢购(此商品不参加上述活动) 查看"
					},	{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 id:4,
					 goods:"素力高",
					 messge:"素力高（Solid Gold）金装天然无谷鸡肉配方全价猫粮5.44kg 金装猫粮添加鸡肉&蛋粉“宠毛克星”让宠爱更自由，iRobot扫地机器人与Go!、NOW、路斯、美里美亚四大宠物品牌强强联合，低至7折更有幸运大抽奖，购物好礼拿不停！立即抢购(此商品不参加上述活动) 查看"
					},	{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 id:4,
					 goods:"素力高",
					 messge:"素力高（Solid Gold）金装天然无谷鸡肉配方全价猫粮5.44kg 金装猫粮添加鸡肉&蛋粉“宠毛克星”让宠爱更自由，iRobot扫地机器人与Go!、NOW、路斯、美里美亚四大宠物品牌强强联合，低至7折更有幸运大抽奖，购物好礼拿不停！立即抢购(此商品不参加上述活动) 查看"
					},	{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 id:4,
					 goods:"素力高",
					 messge:"素力高（Solid Gold）金装天然无谷鸡肉配方全价猫粮5.44kg 金装猫粮添加鸡肉&蛋粉“宠毛克星”让宠爱更自由，iRobot扫地机器人与Go!、NOW、路斯、美里美亚四大宠物品牌强强联合，低至7折更有幸运大抽奖，购物好礼拿不停！立即抢购(此商品不参加上述活动) 查看"
					},
					
				],
				startNum: 1
				
	        };
	    },
	
	    methods: {
	        search(e, val) {
	            console.log(e, val);
	            this['val'+val] = e;
	        },
			 selectedBanner(item, index) {
			                console.log('🥒', item, index)
			            },
			getCard() {
				/* that.cardList = */ 
			},
	    }
	 };
	 
</script>

<style scoped >
	 .book-item {
	      display: flex;
	      height: 20vh;
	      width: 100vw;
		  margin-top: 1vh;
	      background: white;
	    }
	.book-author {
	      overflow : hidden;
	      text-overflow: ellipsis;
	      display: -webkit-box;
		  margin-top: 1vh;
	      -webkit-line-clamp: 3;
	      -webkit-box-orient: vertical
	    }
	.book-gist {
	  overflow : hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  margin-top: 1vh;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical
	}
	.home-hot-book-img {
	      width: 42vw;
		  height: 15vh;
		  margin-top: auto;
		  margin-bottom: auto;
	 }
    .book-item {
          display: flex;
          height: 20vh;
          width: 100vw;
          background: white
        }
	.content-item{
		margin-top: 3vh;
		margin-left: 2vw;
	} 	
</style>
